<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的club</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" type="text/css" href="../common/css/rest.css" />
		<link rel="stylesheet" type="text/css" href="../common/css/meta.css" />

		<link rel="stylesheet" href="../common/css/mui.min.css">
		<script src="../common/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.button {
				width: 50vw;
				height: 8vh;
				line-height: 8vh;
				text-align: center;
				color: white;
				background-color: #31cb73;
				border-radius: 5px;
				margin: 5vh 25vw 5vh 25vw;
			}
			.mui-content {
				background-color: #fff;
			}
			.topic {
				width: 100vw;
				height: 5vh;
				line-height: 5vh;
				background-color: #EFEFF4;
				color: #666666;
				border-top: 1px solid #C0C0C0;
				border-bottom: 1px solid #C0C0C0;
			}
			.content {
	width: 100%;
	margin-top: 1rem;
}
.content>li {
	float: left;
	width: 97%;
	margin-left: 3%;
	margin-top: 1rem;
	border-bottom: 0.03rem solid #ccc;
}
.content>li>div:nth-child(1) {
	float: left;
	width: 8%;
	height: 1rem;
	font-size: 0.6rem;
	text-align: center;
	line-height: 1rem;
	color: #666;
	background-color: #E7EBEF;
	border-radius: 0.3rem;
}
.content>li>.p1 {
	float: left;
	margin-left: 1%;
	width: 70%;
	height: 2rem;
	font-size: 0.8rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.content>li>.p2 {
	float: left;
	margin-left: 9%;
	width: 40%;
	height: 1rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #999;
	font-size: 0.6rem;
}
.content>li>.p3 {
	float: left;
	margin-left: 9%;
	width: 30%;
	height: 1rem;
	text-align: right;
	color: #999;
	font-size: 0.6rem;
}
.content>li>.img {
	width: 90%;
	height: 4.5rem;
	float: left;
	margin-left: 9%;
}
.content>li>.img>a {
	width: 4rem;
	height: 4rem;
	display: block;
}
.content>li>.img>.img1 {
	background-image: url(images/club-1.png);
	background-size: 100% 100%;
}
.content>li>.img>.img2 {
	background-image: url(images/club-2.png);
	background-size: 100% 100%;
}
		</style>
	</head>
	<body>
		<header id="header" class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back"></a>
			<!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-icon-arrowthinleft"></a>-->
			<h1 class="mui-title">我的club</h1>
		</header>
		<div class="mui-content">
			<div class="button">
				发现感兴趣的Club<span class="mui-icon mui-icon-forward"></span>
			</div>
			<div class="topic">
				热门话题
			</div>
			<ul class="content">
			<li>
				<div>1k</div>
				<a class="p1" href="">我的做图软件就这些。。。。你们都有什么？</a>
				<div class="img">
					<a class="img1" href=""></a>
				</div>
				<p class="p2">SAtuo.~应用推荐</p>
				<p class="p3">1小时前</p>
			</li>
			<li>
				<div>1.2k</div>
				<a class="p1">有没有什么歌很小清新！！！</a>
				<p class="p2">我不喜欢海•就爱听音乐</p>
				<p class="p3">1.5小时前</p>
			</li>
			<li>
				<div>1k</div>
				<a class="p1" href="">你有没有因为一部电影，或者电视剧，而特别想去一个地方？我看了霍比特人后就特别想去</a>
				<div class="img">
					<a class="img2" href=""></a>
				</div>
				<p class="p2">SAtuo.~应用推荐</p>
				<p class="p3">2小时前</p>
			</li>
			<li>
				<div>1.2k</div>
				<a class="p1" href="">大家推荐一些好看的电影</a>
				<p class="p2">好书推荐社</p>
				<p class="p3">2016-9-3</p>
			</li>
			<li>
				<div>1k</div>
				<a class="p1" href="">我的做图软件就这些。。。。你们都有什么？</a>
				<div class="img">
					<a class="img1" href=""></a>
				</div>
				<p class="p2">SAtuo.~应用推荐</p>
				<p class="p3">2016-8-3</p>
			</li>
			<li>
				<div>1.2k</div>
				<a class="p1">有没有什么歌很小清新！！！</a>
				<p class="p2">我不喜欢海•就爱听音乐</p>
				<p class="p3">2016-7-3</p>
			</li>
			<li>
				<div>1k</div>
				<a class="p1" href="">你有没有因为一部电影，或者电视剧，而特别想去一个地方？我看了霍比特人后就特别想去</a>
				<div class="img">
					<a class="img2" href=""></a>
				</div>
				<p class="p2">SAtuo.~应用推荐</p>
				<p class="p3">2016-6-3</p>
			</li>
			<li>
				<div>1.2k</div>
				<a class="p1" href="">大家推荐一些好看的电影</a>
				<p class="p2">好书推荐社</p>
				<p class="p3">2016-5-3</p>
			</li>
		</ul>
		</div>
	</body>
</html>
